<template>
  <div style="margin-top: 30px; display: flex">
    <el-card style="width: 50%; margin: 30px auto 0;">
      <div slot="header" class="clearfix">
        <span>个人资料</span>
        <el-button
          style="float: right; padding: 3px 0"
          type="text"
          @click="isUpdate = !isUpdate"
          v-if="!isUpdate"
        >
          编辑资料
        </el-button>
        <el-button
          style="float: right; padding: 3px 0"
          type="text"
          @click="updateUserInfo"
          v-else
        >
          确认修改
        </el-button>
      </div>
      <div class="text item">
        <el-form
          :model="userInfo"
          label-width="100px"
          class="demo-ruleForm"
        >
          <el-form-item label="邮箱号：">
            <span
              style="float: left"
              v-if="!isUpdate"
              v-text="userInfo.uemail"
            ></span>
            <el-input v-model="userInfo.uemail" disabled v-else></el-input>
          </el-form-item>
          <el-form-item label="昵称：">
            <span
              style="float: left"
              v-if="!isUpdate"
              v-text="userInfo.unickname"
            ></span>
            <el-input v-model="userInfo.unickname" v-else></el-input>
          </el-form-item>
          <el-form-item label="性别：">
            <span
              style="float: left"
              v-if="!isUpdate"
              v-text="userInfo.usex"
            ></span>
            <el-select
              v-model="userInfo.usex"
              style="float: left"
              placeholder="请选择性别"
              v-else
            >
              <el-option label="保密" value="保密"></el-option>
              <el-option label="男" value="男"></el-option>
              <el-option label="女" value="女"></el-option>
            </el-select>
          </el-form-item>
        </el-form>
      </div>
    </el-card>
  </div>
</template>

<script>
export default {
  name: "user-info",
  data() {
    return {
      isUpdate: false,
      userInfo: {},
    }
  },
  methods: {
    updateUserInfo(){
      this.isUpdate = false
    }
  },
}
</script>

<style scoped>
a {
  text-decoration: none;
}

a:hover {
  color: rgb(22, 182, 129);
  cursor: pointer;
}

.text {
  font-size: 14px;
}

.item {
  margin-bottom: 18px;
}

.clearfix:before,
.clearfix:after {
  display: table;
  content: "";
}

.clearfix:after {
  clear: both;
}

</style>
